  //点击搜索
  $('.header .container .center button').on('click', function () {
      location.href = './search.html'
  })

  /*选项卡
       1. 设置点击样式
       2. .清除样式
        3.点击事件设置样式*/
  let liEle = $('.nav .container ul>li')

  function onTab() {
      for (let i = 0; i < liEle.length; i++) {
          liEle[i].onclick = function () {
              clear() //清除样式
              this.classList.add('active')
          }
      }
  }
  onTab()

  function clear() {
      for (let i = 0; i < liEle.length; i++) {
          liEle[i].classList.remove('active')
      }

  }
  //sweiper 轮播
  var mySwiper = new Swiper('.swiper', {
      loop: true, // 循环模式选项
      autoplay: true, //自动轮播

      // 如果需要分页器
      pagination: {
          el: '.swiper-pagination',
          clickable: true,
      },

      // 如果需要前进后退按钮
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
  })

  //获取轮播数据
  $.ajax({
      url: "https://xiongmaoyouxuan.com/api/tab/1?start=0",
      type: 'get',
      success: function (res) {

          banner(res.data.gridsV2)
          banner2(res.data.gridsV2)
      },
      error: function (error) {
          console.log(error)
      }
  })




  // 动态渲染 轮播区
  function banner(productList) {
      let productStr2 = productList.map(function (item) {
          //   console.log(item)
          if (item.id == 403) {
              return ` 
                       <div class="left">
                        <p>${item.title}</p>
                        <p>${item.text}</p>
                        <button>Go</button>
                       </div>
                       <div class="r">
                           <img src="${item.imageUrl}" alt="" width="70px" height="90px">
                       </div>
                    `
          }
      }).join('')
      $('.cool').html(productStr2)
  }

  function banner2(productList) {
      let productStr2 = productList.map(function (item) {
          //   console.log(item)
          if (item.id == 402) {
              return ` 
                       <div class="left">
                        <p>${item.title}</p>
                        <p>${item.text}</p>
                        <button>Go</button>
                       </div>
                       <div class="r">
                           <img src="${item.imageUrl}" alt="" width="70px" height="90px">
                       </div>
                    `
          }
      }).join('')
      $('.coupons').html(productStr2)
  }

  //获取列表数据
  function getList(page) {
      let start = 20 * page
      console.log('start', start)
      $.ajax({
          url: 'https://www.xiongmaoyouxuan.com/api/tab/1?start=' +
              start,
          type: 'get',
          success: function (res) {
              onShow(res.data.items.list)

          },
          error: function (error) {
              console.log(error)
          }
      })
  }


  //动态喧嚷列表
  let str = '' //设置一个空的字符串 拼接加载的更多
  function onShow(productList) {

      let productstr = productList.map(function (item) {
          return `
            <div class="show" onclick="getId(${item.id})">
                <img src="${item.image}" width="280px" height="390px" alt="">
                <div>${item.title}</div>
                <div class="platform"><span>淘宝</span> <span>包邮</span></div>
                <div class='price'><span>￥${item.price}</span><span>${item.saleNum}人已买</span>
                    <span>${item.couponValue}</span></div>
            </div>
            `
      }).join('')
      str = str + productstr
      $('.list .container').html(str)
  }

  //实现加载更多
  /**
   * https://www.xiongmaoyouxuan.com/api/tab/1?start=0
   * 通过改变 start的值来  改变数据  设置一个 变量 page=1
   */
  function getMore() {
      let page = 1
      getList(page)
      $('.btn button').click(function () {
          getList(++page)

          console.log(page)
      })
  }
  getMore()
  //回到顶部
  function backTop() {
      // let a =document.documentElement.scrollTop 

      $('.back button').click(function () {

          let timer = window.setInterval(function () {
              //       a=a-100
              //       console.log(a)
              //       if (a <= 0) {
              //           clearInterval(timer)
              //       }  变量 被初始化了  只能使用元代码
              document.documentElement.scrollTop = document.documentElement.scrollTop - 500
              if (document.documentElement.scrollTop <= 0) {
                  clearInterval(timer)
              }
          }, 300)

      })

  }
  backTop()

  //点击商品 跳转到详情页面
  /**
   * 1. localstorage 跳转   注意跳转的位置根据 html位置 为初始位置
   * 2.在详情页 获取id  把获取到的id 用 substring(index+1)   split截取 为数组  最后获取id
   *    通过 data 传参 data:{id =id} 
   */
  //   获取id
  function getId(id) {
      location.href = "../详情 放大镜/detail.html?id=" + id  //注意跳转的位置根据 html位置 为初始位置
    //   location.href = 'detail.html?id=' + id
      console.log(id)
  }